<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>table</title>

<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
<table class="table table-hover table-bordered" id="mytable">
    <thead>
        <tr>
            <th>选中</th>
            <th>编号</th>
            <th>姓名</th>
            <th>密码</th>
            <th>生日</th>
            <th>地址</th>
            <th>操作</th>
        </tr>
        <tr>
            <td><input type="checkbox" onclick="checkAll(this)"/></td>
            <td colspan="6"><a href="javascript:;" class="btn btn-danger" role="button" onclick="delAll(this)">全部删除</a></td>
        </tr>
    </thead>
    <tbody id="listTable">    
        <tr>
            <td><input type="checkbox" name="item" /></td>
            <td>100806131234</td>
            <td>劈日e斩月</td>
            <td>123456</td>
            <td>1995-08-07</td>
            <td>北京市朝阳区艾欧尼亚</td>
            <td>
                <input type="button" name="" value="删除" class="btn btn-danger" onclick="del(this)" />
                <input type="button" name="" value="修改" class="btn btn-info" onclick="modify(this)" />
            </td>
        </tr>
    </tbody>
</table>
    <!-- JavaScript 文件是可选的。从以下两种建议中选择一个即可！ -->
<div id="add">
	<h1>新增数据</h1>
	<form>
	    <table class="table table-hover table-bordered">
	        <tr>
	            <th>编号</th>
	            <td><input type="text" name="" class="form-control" id="num" /></td>
	        </tr>
	        <tr>
	            <th>姓名</th>
	            <td><input type="text" name="" class="form-control" id="username" /></td>
	        </tr>
	        <tr>
	            <th>密码</th>
	            <td><input type="password" name="" class="form-control" id="pwd" /></td>
	        </tr>
	        <tr>
	            <th>生日</th>
	            <td><input type="date" name="" class="form-control" id="birth" /></td>
	        </tr>
	        <tr>
	            <th>地址</th>
	            <td><input type="text" name="" class="form-control" id="addre" /></td>
	        </tr>
	        <tr>
	            <td colspan="2">
	                <input type="reset" value="重置" class="btn btn-primary" id="reset" />   
	                <input type="button" value="添加"  class="btn btn-success" id="add"  onclick="addList()" />
	                <input type="button" value="更新"  class="btn btn-info" id=""  onclick="update()" />
	            </td>
	        </tr>
	    </table>
	</form>
</div>

 
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
 
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript">
	function addList(){
        var oNum = document.getElementById('num').value;
        var oUser = document.getElementById('username').value;
        var oPwd = document.getElementById('pwd').value;
        var oBirth = document.getElementById('birth').value;
        var oAddre = document.getElementById('addre').value;
        var oTr = document.createElement('tr');
        var oTd1 = document.createElement('td');
        var oInput = document.createElement('input');
        oTd1.appendChild(oInput);
        oInput.setAttribute('type','checkbox');
        oInput.setAttribute('name','item');
        var oTd2 = document.createElement('td');
        oTd2.innerHTML = oNum;
        var oTd3 = document.createElement('td');
        oTd3.innerHTML = oUser;
        var oTd4 = document.createElement('td');
        oTd4.innerHTML = oPwd;
        var oTd5 = document.createElement('td');
        oTd5.innerHTML = oBirth;
        var oTd6 = document.createElement('td');
        oTd6.innerHTML = oAddre;
        var oTd7 = document.createElement('td');
        var oInput2 = document.createElement('input');
        var oInput3 = document.createElement('input');
        oInput2.setAttribute('type','button');
        oInput2.setAttribute('value','删除');
        oInput2.setAttribute('onclick','del(this)');
        oInput2.className = 'btn btn-danger';
        oInput3.setAttribute('type','button');
        oInput3.setAttribute('value','修改');
        oInput3.setAttribute('onclick','modify(this)');
        oInput3.className = 'btn btn-info';
        oTd7.appendChild(oInput2);
        oTd7.appendChild(oInput3);
        oTr.appendChild(oTd1);
        oTr.appendChild(oTd2);
        oTr.appendChild(oTd3);
        oTr.appendChild(oTd4);
        oTr.appendChild(oTd5);
        oTr.appendChild(oTd6);
        oTr.appendChild(oTd7);
        var olistTable = document.getElementById('listTable');
        olistTable.appendChild(oTr);
    }
	function del(obj){
        var oParentnode = obj.parentNode.parentNode;
        var olistTable = document.getElementById('listTable');
        olistTable.removeChild(oParentnode);
    }
    //全选
    function checkAll(c){
        var status = c.checked;
        var oItems = document.getElementsByName('item');
        for(var i=0;i<oItems.length;i++){
            oItems[i].checked=status;
        }
    }
    //delAll功能
    function delAll(){
        var olistTable = document.getElementById('listTable');
        var items = document.getElementsByName("item");
        for(var j=0;j<items.length;j++){    
            if(items[j].checked)//如果item被选中
            {
                var oParentnode = items[j].parentNode.parentNode;
                olistTable.removeChild(oParentnode);
                j--;
            }
        }
    }

    //修改功能
    function modify(obj){
        var oNum = document.getElementById('num');
        var oUser = document.getElementById('username');
        var oPwd = document.getElementById('pwd');
        var oBirth = document.getElementById('birth');
        var oAddre = document.getElementById('addre');
        var oTr = obj.parentNode.parentNode;
        var aTd = oTr.getElementsByTagName('td');
        rowIndex = obj.parentNode.parentNode.rowIndex;  
        oNum.value = aTd[1].innerHTML;
        oUser.value = aTd[2].innerHTML;
        oPwd.value = aTd[3].innerHTML;
        oBirth.value = aTd[4].innerHTML;
        oAddre.value = aTd[5].innerHTML;
        console.log(aTd[4].innerHTML);
        //alert(i);

    }
    //更新功能
    function update(){
        var oNum = document.getElementById('num');
        var oUser = document.getElementById('username');
        var oPwd = document.getElementById('pwd');
        var oBirth = document.getElementById('birth');
        var oAddre = document.getElementById('addre');
        var oMytable = document.getElementById('mytable');
        //alert(rowIndex);
        //var aTd = rowIndex.cells;
        console.log(oMytable.rows[rowIndex].cells)
        oMytable.rows[rowIndex].cells[1].innerHTML = oNum.value;
        oMytable.rows[rowIndex].cells[2].innerHTML = oUser.value;
        oMytable.rows[rowIndex].cells[3].innerHTML = oPwd.value;
        oMytable.rows[rowIndex].cells[4].innerHTML = oBirth.value;
        oMytable.rows[rowIndex].cells[5].innerHTML = oAddre.value;
    }
</script>
</head>
<body>
	
</body>
</html>